
<style>
.ui-jqgrid tr.jqgrow td{height:150px;}
</style>

<script type="text/javascript">

	validation_gallery = null;
	gallerylist_createimageWindows = null;
	$(document).ready(function () {
		/* DECLARATION VARIABLE */
		/* General Variable */
		var theme = 'fresh';
		var gallerylist_source;
		var gallerylist_dataAdapter;

		/* Area and Field Variable */
		var gallerylist_menu = $("#gallerylist_menu");
		var gallerylist_content = $("#gallerylist_content");
		var gallerylist_expander = $("#gallerylist_expander");
		var gallerylist_form = $("#gallerylist_form");
		var gallerylist_gridview = $("#gallerylist_gridview");
		var gallerylist_search_textfield = $("#gallerylist_search_textfield");
		var gallerylist_searchbutton = $("#gallerylist_searchbutton");
		var gallerylist_addbutton = $("#gallerylist_addbutton");
		var gallerylist_editbutton = $("#gallerylist_editbutton");
		var gallerylist_deletebutton = $("#gallerylist_deletebutton");
		var gallerylist_resetbutton = $("#gallerylist_resetbutton");

		/* END DECLARATION VARIABEL */

		/* SET TYPE AND THEME */
		$('.field_input').addClass('jqx-input');
		$('.field_input').addClass('field');
		$('.field_input').addClass('jqx-rc-all');

		gallerylist_menu.jqxMenu({ align: 'left', width: '925px', height: '27px', autoOpen: false, autoCloseOnMouseLeave: false, showTopLevelArrows: true, theme: theme });
		gallerylist_menu.css('visibility', 'visible');
		gallerylist_addbutton.jqxButton({ theme : theme, width : '70px', height : '18px' });
		gallerylist_editbutton.jqxButton({ width : '70px' , height : '18px' ,theme : theme });
		gallerylist_deletebutton.jqxButton({ width : '70px' , height : '18px' ,theme : theme });
		gallerylist_searchbutton.jqxButton({ theme : theme, width : '70px', height : '18px' });
		gallerylist_resetbutton.jqxButton({ theme : theme, width : '70px', height : '18px' });

		var gallerylist_source = {
			id : 'gallery_id',
			datatype : "json",
			url : "<?php echo base_url(); ?>c_gallery/gallery_list",
			root : "results",
			datafields : [
				{ name : 'gallery_id' },
				{ name : 'thumb_image' },
				{ name : 'kategori' },
				{ name : 'publish' },
				{ name : 'desk' }
			],
			beforeprocessing : function(data){
				gallerylist_source.totalrecords = data[0].TotalRows;
			}
		}
		var gallerylist_dataAdapter = new $.jqx.dataAdapter(gallerylist_source);

		var imagerenderer = function (row, datafield, value) {
                return '<img style="margin-left: 5px;" height="60" width="50" src="<?php echo base_url();?>'+ value + '"/>';
        }

		gallerylist_gridview.jqxGrid({
			source : gallerylist_dataAdapter,
			width : 925,
			theme : theme,
			pageable : true,
			autoheight : true,
			sortable : true,
			filterable : true,
			columnsresize : true,
			virtualmode : true,
			pagesize : 15,
			rowsheight: 60,
			pagesizeoptions : [15],
			rendergridrows : function(){
				return gallerylist_dataAdapter.records;
			},
			columns : [
				{text : 'Foto', dataField: 'thumb_image', width: 100, cellsrenderer: imagerenderer},
				{text : 'Kategori', dataField : 'kategori', width : 250},
				{text : 'Deskripsi', dataField : 'desk', width : 250},
				{text : 'Publish', dataField : 'publish', width : 80}
			]
		});


		/* DECLARATION FUNCTION */
		function reset_form(){
		}
		function refresh_grid(){
			gallerylist_gridview.jqxGrid('updatebounddata');
		}

		gallerylist_addbutton.click(function(){
			$('#gallerylist_content').empty();
			$('<img src="./images/loader.gif" style="margin:50px auto auto 390px;">').appendTo('#contents');
			$('#gallerylist_content').load('index.php/c_gallery/gallery_addedit');
		});

		gallerylist_editbutton.click(function(){
			var gallery_id = '';
			var rowindex = gallerylist_gridview.jqxGrid('getselectedrowindex');
			var data_record = gallerylist_gridview.jqxGrid('getrowdata', rowindex);
			if(data_record !== null){
				gallery_id = data_record.gallery_id;
				$('#gallerylist_content').empty();
				$('<img src="./images/loader.gif" style="margin:50px auto auto 390px;">').appendTo('#contents');
				$('#gallerylist_content').load('index.php/c_gallery/gallery_addedit/'+gallery_id);
			}else{
				alert("Pilih salah satu field yang ingin diubah");
			}
		});

		gallerylist_searchbutton.click(function(){
			var search_text = gallerylist_search_textfield.val();
			gallerylist_source['url'] = "index.php/c_gallery/gallery_list?query=" + search_text;
			gallerylist_gridview.jqxGrid('gotopage',0);
			gallerylist_dataAdapter.dataBind();
		});
		gallerylist_resetbutton.click(function(){
			gallerylist_search_textfield.val("");
			gallerylist_source['url'] = "index.php/c_gallery/gallery_list/";
			gallerylist_gridview.jqxGrid('gotopage',0);
			gallerylist_dataAdapter.dataBind();
		});

		gallerylist_deletebutton.click(function(){
			var rowindex = gallerylist_gridview.jqxGrid('getselectedrowindex');
			var data_record = gallerylist_gridview.jqxGrid('getrowdata', rowindex);
			if(data_record !== null){

			if(window.confirm("Apakah anda yakin menghapus data ini ? ")){
				$(document).ready(function () {
					$.ajax({
						url : 'index.php/c_gallery/gallery_delete',
						type : 'POST',
						data : {
							id : data_record.gallery_id
						}, success : function(msg){
							var result = eval(msg);
							if(result == 1){
								$("#gallerylist_gridview").jqxGrid('updatebounddata');
								alert("Data sukses dihapus");
							}else{
								alert("Data gagal dihapus");
							}
						}
					});

				});
			}
		}

		});

		function gallerylist_view(event, type ,file){
			gallerylist_createimageWindows(type ,file);
		}

		function gallerylist_edit(event, id) {
			self.location='index.php/c_gallery/get_action&task=update/' + id;
		}


});
</script>
<style type="text/css">
	.field{
		height : 22px;
	}
</style>
	<!-- Begin one column window -->
<br class="clear"/>
<div class="header">
	<span><h1>GALERI</h1></span>
</div>
<div id="gallerylist_content">
	<div id="gallerylist_menu">
		<div id='gallerylist_addbutton' style="float:left;">
			<img style='float: left; margin: 0px;' src='./images/icons/add.png' />
			<div style='float: left; margin-left: 4px;'>Baru</div>
		</div>
		<div id='gallerylist_editbutton' style="float:left;">
			<img style='float: left; margin: 0px;' src='./images/icons/page_edit.png' />
			<div style='float: left; margin-left: 4px;'>Ubah</div>
		</div>
		<div id='gallerylist_deletebutton' style="float:left;">
			<img style='float: left; margin: 0px;' src='./images/icons/delete.png' />
			<div style='float: left; margin-left: 4px;'>Hapus</div>
		</div>
		<div style="float:left;">
			<input type="text" id="gallerylist_search_textfield" class="field_input" style="height: 24px; width : 200px; background-color : #FFFFFF;">
		</div>
		<div id='gallerylist_searchbutton' style="float:left;">
			<img style='float: left; margin: 0px;' src='./images/icons/search.gif' />
			<div style='float: left; margin-left: 4px;'>Cari</div>
		</div>
		<div id='gallerylist_resetbutton' style="float:left;">
			<img style='float: left; margin: 0px;' src='./images/icons/table_refresh.png' />
			<div style='float: left; margin-left: 4px;'>Reset</div>
		</div>
	</div>
	<div id="gallerylist_gridview"></div>
</div>